<template>
  <view class="container">
    <view class="tips flex-row">
      <image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
      <view> 当前订单关联了多条虚拟钥匙控车单 </view>
    </view>
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in dataSource" :key="item">
          <ve-card :title="item.memberName ? item.memberName + ' - ' + item.memberPhone : item.memberPhone">
            <ve-cell label="车牌号">{{ item.licenseNo }}</ve-cell>
            <ve-cell label="控车单号">{{ item.controlCode }}</ve-cell>
            <ve-cell label="控车单开始时间">{{ item.startTime }}</ve-cell>
            <ve-cell label="控车单结束时间">{{ item.endTime }}</ve-cell>
            <ve-operate-list :operates="operates" :record="item" />
          </ve-card>
        </block>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { getCarControlSms } from '@/api/order/sOrder'
  import useList from '@/hooks/useList'
  import { onLoad } from '@dcloudio/uni-app'

  const queryParam = ref({})
  const way = ref('')
  const operates = ref([
    {
      label: '确认发送短信',
      method: (record) => {
        console.log(record)
        getCarControlSms({ id: record.id, type: way.value == 'short' ? 1 : 2 }).then((res) => {
          uni.showToast({
            title: res.result,
            icon: 'none',
          })
        })
      },
    },
  ])
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/carControl/pageList',
    queryParam,
  )

  onLoad((options = {}) => {
    queryParam.value = {
      statusList: [0, 1],
      pageSize: 100,
      pageNumber: 1,
      refType: options.type == 'short' ? 1 : 2,
      refCode: options.refCode,
    }
    way.value = options.type
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
    .tips {
      position: relative;
      display: flex;
      align-items: baseline;
      width: 100%;
      background: #e8f3ff;
      font-weight: 400;
      font-size: 24rpx;
      color: #1e1e1e;
      line-height: 44rpx;
      padding: 24rpx 14rpx 24rpx 64rpx;
      .img {
        position: absolute;
        top: 30rpx;
        left: 24rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
    .record-list {
      padding: 24rpx 24rpx;
    }
    :deep(.ve-cell-title) {
      width: 220rpx;
      max-width: 220rpx;
    }
  }
</style>
